<script setup>
import { NIcon } from 'naive-ui'
import { ArrowForward } from '@vicons/ionicons5'

</script>

<template>
  <div class="w-full bg-white">
    <div class="jdf-top">
      <div class="relative w-1200px h-full mx-auto">
        <div class="h-360px absolute top-160px left-0 pingfang-sc">
          <p class="text-size-50px font-semibold text-hex-111">
            租赁品牌打造，从<span class="text-hex-0A87F8">寓学社</span>开始
          </p>
          <div class="mt-40px text-hex-111 text-size-20px leading-40px">
            <div>
              <span class="icon-font text-hex-0A87F8 translate-x-4px transform">&#xe670;</span>
              聚多房，房巨多、佣金高、结佣快
            </div>
            <div>
              <span class="icon-font text-hex-0A87F8">&#xe670;</span>
              经纪人找房配房必备神器
            </div>
            <div>
              <span class="icon-font text-hex-0A87F8">&#xe670;</span>
              集合全城房源，一键约看，成交多多
            </div>
          </div>
          <NuxtLink class="flex justify-center items-center full-btn w-210px h-64px rounded-32px text-24px mt-60px">
            <span class="text-white">查看更多</span>
              <span class="w-36px h-36px bg-white rounded-18px ml-16px leading-42px">
                <NIcon class="text-hex-0A87F8 text-center">
                  <ArrowForward></ArrowForward>
                </NIcon>
              </span>
          </NuxtLink>
        </div>
        <img class="absolute w-800px h-534px -right-100px top-67px" src="/public/images/product/yxs/main.png" alt="寓学社">
      </div>
    </div>
    <div class="w-1200px mx-auto pingfang-sc">
      <div class="flex justify-between">
        <div class="w-576px">
          <img class="w-100px h-100px" src="/public/images/product/yxs/yz-icon.png" alt="寓盟管家">
          <div class="text-size-36px text-hex-111 leading-50px pl-16px mt-10px">一站式</div>
          <div class="w-464px text-size-28px text-hex-777 leading-40px text-left font-normal ml-16px mt-12px">优化公寓企业品牌形象，减少业主、租客决策成本，提升成单率</div>
          <NuxtLink class="blue-host text-24px mt-40px ml-16px hover:opacity-80">
            <span class="mr-14px">查看更多</span>
            <NIcon class="text-hex-0A87F8 text-center">
              <ArrowForward></ArrowForward>
            </NIcon>
          </NuxtLink>
        </div>
        <img class="w-600px h-360px" src="/public/images/product/yxs/yzs.png" alt="寓盟管家" />
      </div>
      <!-- 定制化 -->
      <div class="flex items-center mt-160px">
        <img class="w-600px h-360px" src="/public/images/product/yxs/dzh.png" alt="寓盟管家" />
        <div class="ml-120px">
          <img class="w-100px h-100px" src="/public/images/product/yxs/dz-icon.png" alt="寓盟管家">
          <div class="text-size-36px text-hex-111 leading-50px pl-16px mt-10px">定制化</div>
          <div class="w-464px text-size-28px text-hex-777 leading-40px text-left font-normal ml-16px mt-12px">严苛筛选诊断品牌资产发现品牌机会，多维度提升公寓品牌资产价值</div>
          <NuxtLink class="blue-host text-24px mt-40px ml-16px hover:opacity-80">
            <span class="mr-14px">查看更多</span>
            <NIcon class="text-hex-0A87F8 text-center">
              <ArrowForward></ArrowForward>
            </NIcon>
          </NuxtLink>
        </div>
      </div>
      <div class="flex justify-between items-center mt-160px">
        <div class="w-576px">
          <img class="w-100px h-100px" src="/public/images/product/yxs/lt-icon.png" alt="寓盟管家">
          <div class="text-size-36px text-hex-111 leading-50px pl-16px mt-10px">立体化</div>
          <div class="w-464px text-size-28px text-hex-777 leading-40px text-left font-normal ml-16px mt-12px">创新品牌传播策略与落地载体，将品牌直观地呈现在用户眼前</div>
          <NuxtLink class="blue-host text-24px mt-40px ml-16px hover:opacity-80">
            <span class="mr-14px">查看更多</span>
            <NIcon class="text-hex-0A87F8 text-center">
              <ArrowForward></ArrowForward>
            </NIcon>
          </NuxtLink>
        </div>
        <img class="w-600px h-360px" src="/public/images/product/yxs/lth.png" alt="寓盟管家" />
      </div>
    </div>
    <div class="h-180px"></div>
  </div>
</template>

<style scoped>
.jdf-top {
  width: 100%;
  height: 800px;
  background: url('/public/images/product/yxs/yxs-bg.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.blue-host {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  line-height: 50px;
  background: #FFFFFF;
  border-radius: 25px;
  color: #0A87F8;
  border: 1px solid #0A87F8;
  cursor: pointer;
}
</style> 